﻿        <header>
            <div class="inner">
                <div class="search-box">
                    <form action="Search" method="GET">
                        <input type="text" class="span4" id="searchString" name="searchString" placeholder="Search for Products, Stores, and People" onblur="setTimeout(function(){$('#searchresult').hide()}, 200)" onkeyup="search()">
                        <div id ="searchresult">
                            <table>
                                <tbody></tbody>
                            </table>
                        </div>
                    </form>
                </div>
                <div id="logo"></div>
                <div id="header-menu">
                    <div class="user-menu">
                        @Html.Partial("_LoginPartial")
                    </div>
                    <ul class="noti5s">
                        <li id="cart"><a href="#">
                            <span class="cart-title">Cart</span> <span class="totalItems" data-bind="text: totalItems"></span></a>
                            <div class="cart-container" style="display: none;">
                                <div data-bind="style: { display:shops().length==0? 'none' : 'block'}">
                                    <div data-bind="foreach: shops">
                                        <div class="store">
                                            <a href="#" class="store-title" data-bind="text: storeTitle, attr: { href: storeUrl }"></a>
                                            <a href="/Order/Checkout" data-bind="attr:{'href': checkoutLink}" class="check-out">CHECK OUT</a>
                                        </div>
                                        <div data-bind="foreach: products">
                                            <div class="product">
                                                <img data-bind="attr:{src: productImage}">
                                                <div class="info">
                                                    <div class="title">
                                                        <a href="#" data-bind="text: productTitle, attr: { href: productUrl }"></a>
                                                    </div>
                                                    <div class="price-quantity">
                                                        $<span  data-bind="text: productPrice"></span>
                                                        x&nbsp;<span class="badge" data-bind="text: productQuantity"></span></div>
                                                    <div class="action"><a href="#" data-bind="click: function(data){$parent.removeProduct(data,$root)}">Remove</a></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <nav>
            <div class="navbar">
                <div class="navbar-inner">
                    <ul class="nav">
                        <li><a href="/">Home</a></li>
                        
                        @if (User.Identity.IsAuthenticated)
                        {
                            <li><a href="/User/Id/@WebSecurity.CurrentUserId">My Profile</a></li>
                            <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Inbox <span class="stat-fig" id="fig"></span></a>
                                <ul id="notifList" class="dropdown-menu notif">
                                    <li class="more" data-mid="0">
                                        <a href="">View All Recent Messages</a>
                                    </li>
                                </ul>
                            </li>
                            <li>@Html.ActionLink("Orders", "UserManage", "Order")</li>
                        }
                        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Browse<b class="caret"></b></a>
                            <ul id="cateList" class="dropdown-menu">
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <script src="/Scripts/moment.min.js"></script>
        <script>
            var notifLength = 0;
            $("document").ready(function() {
                var notifListDom = $("#notifList");
                
                var getNewsFeed = function() {
                    var mid = $("#notifList li")[0].dataset.mid;
                    
                    $.getJSON(
                        "/Message/GetNewsFeed?LastMessageId="+mid,
                        function(data) {
                            var displayName = $("span.username").text();
                            $.each(data, function (key, val) {
                                var unread = val.IsRead == false ? "unread" : "";
                                if (val.IsRead == false) {
                                    ++notifLength;
                                };
                                var objName = val.Obj.Name == displayName ? "you" : val.Obj.Name;

                                notifListDom.prepend('<li class="'+unread+'" data-mid="'+val.MessageId+'">'+
                                    '<a href="javascript:markAsRead('+val.MessageId+')" title="Click on message to mark as Read">'
                                        +'<div class="actor-img">'+
                                            '<img src="/Image/'+val.Subj.ImageId+'">'
                                        +'</div>'
                                        +'<div class="message">'
                                            +'<div class="title">'+val.Subj.Name+val.Verb+objName+'.</div>'
                                            +'<div class="date">'+moment(parseInt(val.CreateDate.replace(/^\D+/g, '').split(")/")[0])).fromNow()+'</div>'
                                        +'</div>'+
                                    '</a></li>');
                            });
                            if (notifLength > 0) {
                                $("#fig").addClass("new");    
                            } else {
                                $("#fig").removeClass("new");    
                            }
                            $("#fig").text(notifLength);
                        }
                    )
                    setTimeout(function() {getNewsFeed();}, 15000);
                }
                getNewsFeed();

                
            });
            var markAsRead = function(MessageId) {
                $.getJSON("/Message/MarkAsRead?MessageId="+MessageId, function(data) {
                    if (data == "true") {
                        $("li[data-mid="+MessageId+"]").removeClass("unread");
                        --notifLength;
                        if (notifLength > 0) {
                            $("#fig").addClass("new");    
                        } else {
                            $("#fig").removeClass("new");    
                        }
                        $("#fig").text(notifLength);
                    } else {
                        alert("Sorry. The Operation failed. Please try again");
                    }
                });
                return false;
            }
        </script>